<template>
	<scroll-view :scroll-y="scrollY" class="scroll-view" :style="{height, background: bgColor}"
		@scrolltolower="scrolltolower" :refresher-enabled="refresh" :refresher-triggered="triggered"
		:refresher-threshold="80" refresher-background="#f3f4f5" @refresherrefresh="onRefresh" @scroll="scroll">
		<slot></slot>
		<view v-if="margin && !pageTotal" :style="{padding: margin}">
			<i-notData :notType="notType" v-if="pageTotal === 0 && noData && showNotData"></i-notData>
		</view>
		<i-notData :notType="notType" v-else-if="pageTotal === 0 && noData && showNotData"></i-notData>
		<!-- #ifdef APP-PLUS -->
		<uni-load-more :iconSize="18" color="#FB652E" v-if="total && total > 15" :status="more"></uni-load-more>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="total && total > 15" class="more_status">
			{{more === 'noMore' ? '没有更多了' : more === 'loading' ?  '加载中....' : '上拉加载更多'}}
		</view>
		<!-- #endif -->
		<view v-if="total" style="height: 20rpx;"></view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import {
		ref,
		defineProps,
		defineEmits,
		computed,
		onMounted
	} from 'vue';

	import _ from 'lodash'

	const props = defineProps({
		height: {
			type: String,
			default: '400px'
		},
		total: {
			type: Number,
			default: 0
		},
		pageTotal: {
			type: Number,
			default: 0
		},
		noData: {
			type: Boolean,
			default: true
		},
		isStaff: {
			type: Boolean,
			default: false
		},
		refresh: {
			type: Boolean,
			default: false
		},
		margin: {
			type: String,
			default: ''
		},
		notType: {
			type: String,
			default: ''
		},
		bgColor: {
			type: String,
			default: ''
		},
		scrollY: {
			type: Boolean,
			default: true
		}
	})

	const more = ref('more')
	const triggered = ref(false)
	const showNotData = ref(false)

	const emit = defineEmits(['more', 'refresh', 'scroll'])

	const staff = computed(() => {
		return props.isStaff
	})

	const scrolls = () => {
		if (props.pageTotal >= props.total) {
			more.value = 'noMore'
		} else {
			more.value = 'loading'
			emit('more')
		}
	}
	const scroll = (e) => {
		emit('scroll', e)
	}

	const onRefresh = () => {
		triggered.value = true
		emit('refresh')
		setTimeout(() => {
			triggered.value = false
		}, 800)
	}

	const scrolltolower = _.debounce(scrolls, 300)

	onMounted(() => {
		setTimeout(() => {
			showNotData.value = true
		}, 800)
	})
</script>

<style lang="scss" scoped>
	.more_status {
		width: 100%;
		@include flexRC;
		@include dfont(26rpx);
		color: $dcolor;
		padding: 24rpx 0;
	}
</style>